{% extends "bbs/basebbs.html" %}
{% block title %}有容论坛首页{% endblock %}

{% block styles %}
{{ super() }}

{% endblock %}

{% block content %}
{{ super() }}
<div class="container">
    <div class="row">
        <div class="col-md-12 mb-4">
            
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <h2>有容论坛</h2>

            <p>
                <button id="actionButton" onclick="testsse()">执行测试后端testsse</button>
            </p>

        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}

<script>
    // 执行测试后端testsse
    function testsse() {
        fetch('/user/testsse', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'same-origin'  // 添加这行确保会话一致性
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应不是有效的');
            }
            return response.json();
        })
        .then(data => {
            console.log('测试后端testsse:', data);
            // 处理成功获取的数据，例如更新页面或通知用户
            // 反馈用户成功消息
            let _mess = '触发后端的SSE推送事件；请查看控制台输出。';
            _mess += '测试后端testsse成功: ' + JSON.stringify(data);
            console.log(_mess);
        })
        .catch(err => {
            console.error('测试后端testsse失败:', err);
        });
    }
</script>

<script>
    // 论坛页面SSE事件处理器 - 处理页面级别的业务逻辑
    const ForumPageEventHandler = {
        // 存储事件处理器引用，用于后续清理
        eventHandlers: {},
        
        // 初始化事件监听
        init() {
            // 监听用户资料更新事件
            this.eventHandlers.profileUpdated = this.handleProfileUpdated.bind(this);
            document.addEventListener('sse-business-profile_updated', this.eventHandlers.profileUpdated);
            
            // 如果要取消某种业务，只需要注释或删除对应的事件监听
            // 例如，取消监听系统配置更新事件
            // this.eventHandlers.systemConfig = this.handleSystemConfig.bind(this);
            // document.addEventListener('sse-business-system_config', this.eventHandlers.systemConfig);
            
            // 其他监听器保持不变
            this.eventHandlers.notification = this.handleNotification.bind(this);
            document.addEventListener('sse-business-notification', this.eventHandlers.notification);
            
            this.eventHandlers.connectionState = this.handleConnectionState.bind(this);
            document.addEventListener('sse-state-change', this.eventHandlers.connectionState);
            
            console.log('论坛页面SSE事件监听已初始化 - 系统配置更新监听已禁用');
        },
        
        // 处理用户资料更新事件
        handleProfileUpdated(event) {
            console.log('收到用户资料更新事件:', event.detail);
            const data = event.detail;
            
            if (data && data.data) {
                // 更新本地用户数据缓存
                // UserDataCache.updateUserData({ data: data.data });
                
                // 更新UI显示
                //displayUserInfo(data.data);
                
                // 显示通知消息
                if (typeof window.show_noti === 'function' && data.message) {
                    window.show_noti(data.message, data.level || 'info');
                }
            }
        },
        
        // 处理通知事件
        handleNotification(event) {
            console.log('收到通知事件:', event.detail);
            const data = event.detail;
            
            if (typeof window.show_noti === 'function' && data.message) {
                window.show_noti(data.message, data.level || 'info');
            }
        },
        
        // 如果完全不需要这个处理函数，可以删除或注释掉
        /* 
        // 处理系统配置更新事件
        handleSystemConfig(event) {
            console.log('收到系统配置更新:', event.detail);
            // 处理系统配置更新...
        },
        */
        
        // 处理连接状态变更
        handleConnectionState(event) {
            const { state } = event.detail;
            console.log(`SSE连接状态变更: ${state}`);
            
            const statusIndicator = document.getElementById('sse-status-indicator');
            if (statusIndicator) {
                statusIndicator.className = `connection-status ${state}`;
                
                let statusText = '未连接SSE';
                switch(state) {
                    case 'connected': statusText = '已连接'; break;
                    case 'connecting': statusText = '连接中...'; break;
                    case 'reconnecting': statusText = '重新连接中...'; break;
                    case 'closed': statusText = '已断开'; break;
                    case 'failed': statusText = '连接失败'; break;
                    default: statusText = '未知状态'; break;
                }
                
                statusIndicator.textContent = statusText;
            }
            
            // 处理连接失败的情况
            if (state === 'failed') {
                if (typeof window.show_noti === 'function') {
                    window.show_noti('实时消息连接失败，请尝试刷新页面', 'warning');
                }
            }
        },
        
        // 清理所有事件监听
        destroy() {
            document.removeEventListener('sse-business-profile_updated', this.eventHandlers.profileUpdated);
            document.removeEventListener('sse-business-notification', this.eventHandlers.notification);
            // 如果取消了监听，这里也不需要移除
            // document.removeEventListener('sse-business-system_config', this.eventHandlers.systemConfig);
            document.removeEventListener('sse-state-change', this.eventHandlers.connectionState);
            
            this.eventHandlers = {};
            console.log('论坛页面SSE事件监听已销毁');
        }
    };

    // 初始化页面，从localForage加载用户数据
    async function initPage() {
        try {
            const userData = await UserDataCache.getUserData();
            if (userData && userData.data) {
                console.log('从本地缓存加载用户数据:', userData.data.user_id);
                displayUserInfo(userData.data);
                return userData;
            } else {
                showLoginPrompt();
                console.log('本地缓存中没有用户数据', userData);
                return null;
            }
        } catch (err) {
            console.error('initPage()获取用户数据失败:', err);
            showLoginPrompt();
            throw err;
        }
    }
    
    // 显示用户信息
    function displayUserInfo(user) {
        // 更新页面上的用户信息
        document.getElementById('loginStatus').innerHTML = `
            <div class="user-info">
                <img src="${user.avatar}" class="avatar" alt="${user.nickname}">
                <span>欢迎，${user.nickname}</span>
            </div>
        `;
    }
    
    // 显示登录提示
    function showLoginPrompt() {
        document.getElementById('loginStatus').innerHTML = `
            <div class="login-prompt">
                用户未登录
            </div>
        `;
    }

    // 页面加载后执行
    document.addEventListener('DOMContentLoaded', async function() {
        // 初始化页面数据
        const userData = await initPage().catch(err => {
            console.error('初始化页面失败:', err);
            showLoginPrompt();
            return null;
        });
        
        // 如果用户已登录，初始化SSE连接
        if (userData && userData.data && userData.data.user_id) {
            console.log('用户已登录，初始化SSE连接', userData);
            // 初始化SSE管理器
            await SSEManager.init();
            
            // 初始化页面事件处理
            ForumPageEventHandler.init();
        }else{
            console.log('用户未登录，不初始化SSE连接', userData);
        }
        
        // 添加页面卸载处理
        window.addEventListener('beforeunload', function() {
            console.log('页面卸载，清理事件监听');
            //ForumPageEventHandler.destroy();
        });
    });
</script>
{% endblock %}